.top-page {
  position: relative;

  :deep(.cu-bar) {
    background-color: transparent;

    .nav-content__item {
      padding: 0 12rpx;
    }

    .nav-content__item-1 {
      color: #636363;
    }

    .more {
      width: 50rpx;
      margin-right: 20rpx;
      filter: invert(70%);
    }
  }

  .content {
    position: absolute;
    top: 0;
    min-height: 100vh;

    .header {
      padding-top: 140rpx;
      width: 750rpx;
      height: 344rpx;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0) 60%, #fff 99.99%),
        radial-gradient(31.86% 32.92% at 93.73% 9.16%, #98f9fe 0%, rgba(152, 249, 254, 0) 100%),
        conic-gradient(from 206deg at 38.53% -3.3%, rgba(255, 136, 131, 0.2) 0deg, rgba(255, 162, 159, 0.2) 360deg),
        radial-gradient(104.64% 64.57% at 24.67% 2.2%, #ff9086 0%, rgba(255, 179, 166, 0) 100%);
    }

    .search-wrap {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: 0 20rpx;

      .search {
        flex: 1;
        border-radius: 4px;
        background: #fff;
        height: 64rpx;
        text-align: center;
      }

      .search-btn {
        height: 64rpx;
        line-height: 64rpx;
        padding: 0 22rpx;
        background-color: #ff0900;
        color: #fff;
        border-radius: 16rpx;
        flex-shrink: 0;
        margin-left: 12rpx;
      }
    }

    .nav-box {
      padding: 0 30rpx;
      margin-top: 40rpx;
      letter-spacing: 2rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .intention {
        flex-shrink: 0;
        color: #fff;
        padding: 0 12rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 22rpx;
        background: linear-gradient(90deg, #ff7a50 0%, #ff1d14 100%);
        border-radius: 8rpx;
      }

      .nav-wrap {
        width: 100%;
        margin-right: 20rpx;
        text-align: center;
        font-size: 28rpx;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: auto;

        .nav-item {
          padding: 0 8rpx;
          margin-right: 4rpx;
          flex-shrink: 0;
          color: #666;
          display: flex;
          align-items: center;
        }

        .nav-activity {
          color: #111;
          position: relative;
          font-size: 34rpx;
          font-weight: bold;

          &::after {
            position: absolute;
            content: "";
            width: 70%;
            height: 4rpx;
            left: 15%;
            bottom: -10rpx;
            background-color: #ff3121;
          }
        }
      }
    }

    .list {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 0 16rpx 40rpx;

      .li {
        width: 100%;
        background-color: #fff;
        margin-top: 16rpx;
        padding: 16rpx;
        border-radius: 16rpx;

        .li-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32rpx;
          font-weight: bold;

          .li-top-salary {
            color: #ff0900;
          }
        }

        .li-need {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-top: 24rpx;
          font-size: 22rpx;

          .need-item {
            padding: 4rpx 12rpx;
            background-color: #f4f8fb;
            border-radius: 8rpx;
            color: #4c4f54;
            margin-right: 4rpx;
          }
        }

        .li-composer__wrap {
          display: flex;
          align-items: center;
          margin-top: 16rpx;
          color: #505358;
          font-size: 26rpx;

          .li-composer_size {
            margin-left: 24rpx;
          }
        }

        .li-info {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1rpx solid #f4f4f4;
          margin-top: 16rpx;
          padding: 24rpx 0;
          font-size: 24rpx;

          .li-user__info {
            display: flex;
            align-items: center;
            color: #505358;

            .user-img {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              margin-right: 12rpx;
              flex-shrink: 0;
            }
          }

          .li-address {
            color: #7b7f85;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }

  :deep(.more-wrap) {
    width: auto;
    border-radius: 12rpx;
    height: auto;
    left: 80%;
    top: 10%;

    .more-item {
      width: 220rpx;
      text-align: center;
      padding: 18rpx;
      line-height: 1.2;
    }
  }
}
